<template>
	<scroll-view class="inspection-hall-list" scroll-y @scrolltolower="scroll" :refresher-triggered="triggered"
		:refresher-threshold="100" @refresherrestore="onRestore" refresher-enabled @refresherrefresh="onRefresh"
		:ower-threshold="0">
		<view class="inspection-hall-list-item" :class="'type-' + item.approveStatus" v-for="(item, index) in data"
			:key="index">
			<view class="header">
				<view class="item-dt">
					<view class="dt-l">
						<p class="name u-line-1">{{ item.deviceNo }}</p>
						<p class="name u-line-1">{{ item.deviceName }}</p>
					</view>
					<text class="dt-r">
						<u-tag type="success" text="待分配" v-if="navIndex == 0"></u-tag>
						<u-tag type="success" text="点检中" v-if="navIndex == 1"></u-tag>
						<u-tag type="success" text="待确认" v-if="navIndex == 4"></u-tag>
						<u-tag type="success" text="已结单" v-if="navIndex == 2"></u-tag>
						<u-tag type="success" text="已过期" v-if="navIndex == 3"></u-tag>
					</text>
				</view>
				<view class="type-list">
					<view class="type-list-item" style="color: red">
						{{ item.itemLevel == 1 ? "一级点检" : item.itemLevel == 2 ? "二级点检" : "三级点检" }}
					</view>
					<!-- <view class="type-list-item" style="color: blue">{{
            item.maintenanceStatus == "10" ? "已升级" : "未升级"
          }}</view> -->
					<!-- 			<view class="type-list-item" style="color: blue">{{ item.affectProductionFlagStr }}模具异常</view>
					<view class="type-list-item" style="color: volcano">{{ item.affectProductionFlagStr }}品质异常</view> -->
					<!-- <view class="type-list-item color0">一级点检</view>
          <view class="type-list-item">日</view>
          <view class="type-list-item">不需要确认</view> -->
				</view>
			</view>

			<view class="main-box">
				<view class="item-dd">
					<text class="label">计划名称:</text>
					<text class="value">{{ item.planName }}</text>
				</view>
				<view class="item-dd">
					<text class="label">点检单号:</text>
					<text class="value">{{ item.id }}</text>
				</view>
				<view class="item-dd">
					<text class="label">具体位置:</text>
					<text class="value">{{ item.installPositionStr }}</text>
				</view>
				<view class="item-dd">
					<text class="label">标准工时(min):</text>
					<text class="value">{{ item.itemHours }}</text>
				</view>
				<view class="item-dd">
					<text class="label">创建时间:</text>
					<text class="value">{{ item.createTime }}</text>
				</view>
				<view class="item-dd">
					<text class="label">截止时间:</text>
					<text class="value">{{ item.endTime }}</text>
				</view>
			</view>

			<view class="footer-btn">
				<template v-if="navIndex == 0">
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckDel')" @click="handleDeleteModal(item)" text="删除"></u-button>
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckbrforeDispath')" @click="brforeDispath(item)" text="分配"></u-button>
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckBrforeService')" @click="service(item, '1')" text="接单"></u-button>
				</template>
				<template v-if="navIndex == 1">
					<u-button class="btn" type="primary" v-if="$has('moldSpotCheckComplete')" @click="handleConfirmOrder(item)" text="开始点检"></u-button>
				</template>
				<template v-if="navIndex == 4">
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckDel')" @click="handleDeleteModal(item)" text="删除"></u-button>
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckConfirm')" @click="handleAccept(item)" text="完成确认"></u-button>
				</template>
				<template v-if="navIndex == 3">
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckDel')" @click="handleDeleteModal(item)" text="删除"></u-button>
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckbrforeDispath')" @click="brforeDispath(item)" text="分配"></u-button>
					<u-button class="btn" type="primary" v-if="$has('deviceSpotCheckBrforeService')" @click="service(item, '1')" text="接单"></u-button>
				</template>
			</view>
		</view>
		<view class="loading animation-scale-up" v-if="loading"></view>
		<view class="scroll-no-data" v-if="scrollNoData">已拉到最底部</view>
		<MyModal v-model="show" :title="modalTitle" :content="content" @confirm="confirm" ref="uModal"
			:showCancelButton="true" @cancel="cancelModal"></MyModal>
	</scroll-view>
</template>

<script>
	import MyModal from "@/components/myModal";
	import fetch from "@/utils/fetch";
	import {
		setPageData
	} from "@/store/user";
	import {
		initToken,
		setToken,
		getToken,
		getUserInfo,
		getNotice,
	} from "@/store/user.js";
	export default {
		components: {
			MyModal,
		},
		props: {
			data: {
				type: Array,
				default: [],
			},
			scrollNoData: {
				type: Boolean,
				default: false,
			},
			navIndex: {
				type: Number,
				default: 0,
			},
		},

		data() {
			return {
				loading: true,
				noData: false,
				userInfo: {},
				triggered: false,
				show: false,
				modalTitle: "",
				content: "",
				selectList: [],
				assisterList: [],
			};
		},
		onReady: async function() {
			this.userInfo = await getUserInfo();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		created() {
			const that = this;
			uni.$on("getSelectList", function(data) {
				//接受参数到ID,随意取名
				that.selectId = data; //用此页面的参数来存储
				console.log("that.selectList", that.selectList);
			});
		},
		methods: {
			submit() {},
			handleAccept(order) {
				const that = this;
				setPageData(order);
				uni.navigateTo({
					url: "/pages/device/inspection-hall/accept?id=" +
						order.id +
						"&status=" +
						that.navIndex,
					animationType: "pop-in",
				});
			},
			confirm() {
				const that = this;
				that.show = false;
				that.$loading.open();
				console.log(" this.obj", that.obj);
				fetch("post", that.myUrl,null, {
					id: that.obj.id,
				}).then((res) => {
					uni.$emit("openToast", {
						type: "success",
						title: "操作成功",
						complete() {
							that.$emit("onRefresh");
						},
					});
				});
			},
			cancelModal() {
				this.show = false;
			},
			setLoading(val) {
				this.loading = val;
			},
			handleDeleteModal(item) {
				const that=this;
				this.deleteShow = true;
				this.$tips("提示", "是否确认刪除？", function(res) {
					if (res.confirm) {
						fetch("post", "/dms/devSpotCheckTask/delTaskByIds", [item.id]).then((res) => {
							if (res.code === 200) {
								uni.$emit("openToast", {
									type: "success",
									title: "刪除成功",
									complete() {
										this.deleteShow = false;
										this.detailId = "";
										that.onRefresh()
									},
								});
								// this.getCountsList();
							}
						});
					}
				});
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true;
				this.$emit("onRefresh");
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000);
			},
			brforeDispath(order, status) {
				this.handleDispath(order, status);
			},
			async beforeRevice(order, target) {
				this.handleRecive(order, target);
			},
			//接
			handleRecive(order, deviceMId) {
				const that = this;
				let params = {
					workOrderId: order.id,
					userId: userInfo.userId,
					workOrderStatus: order.workOrderStatus,
					platform: 1,
				};
				if (deviceMId) {
					params["deviceMId"] = deviceMId;
				}
				that.$loading.open();
				fetch("get", "/dms/workOrder/receiveOrDistribution", params)
					.then((res) => {
						uni.$emit("openToast", {
							type: "success",
							title: "操作成功",
							complete() {
								that.$emit('onRefresh');
							},
						});
					})
					.finally(() => {
						// this.$refs.orderDetailModal.show(order.id, '2')
						// const userId = localStorage.getItem('ziyunFactoryUserId')
					});
			},
			//分配
			handleDispath(order, status) {
				uni.navigateTo({
					url: "/pages/device/inspection-hall/operator?multiple=false&id="+order.id,
					animationType: "pop-in",
				});
			},
			handleConfirmOrder(order) {
				const that = this;
				setPageData(order);
				uni.removeStorageSync("getSelectLists");
				uni.setStorageSync("getSelectLists", {});
				uni.navigateTo({
					url: "/pages/device/inspection-hall/inspection-completed?id=" +
						order.id +
						"&status=" +
						that.navIndex,
					animationType: "pop-in",
				});
			},
			service(data, status) {
				this.obj = data;
				let url, desc, title;
				if (status == "1") {
					url = "/dms/devSpotCheckTask/acceptTask";
					desc = "是否接单请确认!";
					title = "接单提醒";
				}
				this.myUrl = url;
				this.modalTitle = title;
				this.content = desc;
				this.show = true;
			},
			scroll(e) {
				const that = this;
				if (!that.noData) {
					this.loading = true;
					this.$emit("scrollBottom", (val) => {
						that.noData = val;
						setTimeout(() => {
							this.loading = false;
						}, 400);
					});
				}
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true;
				this.$emit("onRefresh");
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000);
			},
			onRestore() {
				this.triggered = "restore"; // 需要重置
			},
			itemClick(item) {
				this.modalTitle = "收货提醒";
				this.content = "确认已收到模具，并开始进行维修！";
				this.show = true;
			},
			ok(val) {
				this.$emit("ok", val);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.inspection-hall-list {
		height: 100%;
		padding: 0 20rpx;

		.inspection-hall-list-item {
			padding-top: 16rpx;
			background-color: #fff;
			box-shadow: 0rpx 5rpx 13rpx 1rpx #e0e0e0;
			margin-bottom: 20rpx;
			border-radius: 10px;
			overflow: hidden;

			.item-dt {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-bottom: 27rpx;

				.name {
					font-size: 18px;
				}

				.view {
					color: #83b4ff;
				}

				.dt-l {
					flex: 1;
					margin-right: 10px;
				}

				.dt-r {
					min-width: 70px;
					text-align: center;
					display: flex;
					justify-content: center;
				}
			}

			.type-list {
				display: flex;

				.type-list-item {
					font-size: 14px;
					padding: 3px 10px;
					border: 1px solid #e0e0e0;
					margin-right: 10px;
					border-radius: 5px;
				}

				.color0 {
					background-color: #f7cccc;
					color: red;
				}
			}

			.header {
				padding: 0 30rpx 10px 30rpx;
				border-bottom: 1px solid #e0e0e0;
			}

			.main-box {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e0e0e0;

				.item-dd {
					display: flex;
					align-items: center;
					justify-content: space-between;
					overflow: hidden;
					margin-bottom: 22rpx;

					.label {
						margin-right: 20rpx;
						font-size: 28rpx;
						width: 120rpx;
						min-width: 120rpx;
					}

					.value {
						font-size: 28rpx;
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #666;
					}

					.btn {
						width: 170rpx;
						min-width: 170rpx;
						margin-left: 29rpx;
						height: 60rpx;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
		}

		.img-box {
			width: 120rpx;
			margin-bottom: 27rpx;
		}

		.footer-btn {
			display: flex;
			padding: 20rpx;
			align-items: flex-end;
			justify-content: end;

			.btn {
				width: 80px;
				margin: 0;
				height: 32px;
				line-height: 32px;
				margin-right: 10rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.scroll-no-data {
			text-align: center;
		}
	}
</style>